<template>
	<view class="weui-line">
		<view class="weui-flex filter">
			<view class="weui-flex__item" v-if="item.items.length>0" v-for="(item,index) in items" :key="index" @tap="clickFilter(index)">
				<text class="jiantou" :class="selectItems[index] ? selectItems[index].className : ''" >
					{{selectItems[index] && selectItems[index].selectName!='' ? selectItems[index].selectName : item.name }} 
				</text>
				<!-- <uniIcon type="jiantou" :class="{'rotate':popupItem!=undefined && filterIndex===index && popupShow}" style="margin-left: 5px;" right="0"></uniIcon> -->
			</view>
		</view>
		<view id="popup-layer" v-if="popupItem" v-show="popupShow" class="popup-layer" @click="close">
			<view id="popup-content" class="popup-content" v-if="popupItem.listType=='row'">
				<view :class="'content-row' + (popupItem.selectIndex===index ? '-active':'')"  :key="index" v-for="(item,index) in popupItem.items" @tap="clickItem(index,item)">
					<text>{{item.name}}</text>
					<uniIcon v-if="popupItem.selectIndex===index" type="duigou" size="40"></uniIcon>
				</view>
			</view>
			<view id="popup-content" v-else-if="popupItem.listType=='city'" >
				<select-city :hotCitys="popupItem.items" v-model="cityValue" @on-select="clickCity" ></select-city>
			</view>
			<view id="popup-content" class="popup-content" v-else>
				<text :key="index" :class="'content-col' + (popupItem.selectIndex===index ? '-active':'')" v-for="(item,index) in popupItem.items" @tap="clickItem(index,item)">
					{{item.name}}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	import selectCity from '@/components/select-city/select-city.vue'

    export default {
		components: { selectCity },
		name: 'head-filter',
		props: {
			items:{
				type: Array,
				default: function(e) {
				    return []
				}
			}
		},
		data() {
			return {
				selectItems:[],
				filterIndex:undefined,
				popupItem:undefined,
				popupShow:false,
				current:0,
				date:undefined,
				cityValue: ''
			}
		},
		created() {
			var th = this;
			var filterArray = new Array();
			this.items.forEach(function(item,index){
                if(item.selectIndex && item.selectIndex!=-1){
					if(item.listType=="city"){
					    if(item.selectName!=undefined && item.selectName.substr(item.selectName.length-1,1)=="市"){
							item.selectName = item.selectName.substring(0,item.selectName.length-1);
						}
						filterArray.push({
							name:item.id,
							value:item.selectName
						});
					}else{
						var selectItem = item.items[item.selectIndex];
						item.selectName = selectItem.name;
						filterArray.push({
							name:item.id,
							value:selectItem.id
						});
					}
					th.$set(th.selectItems,index,item);
				}
			});
			this.$emit('change',{filterArray:filterArray,load:false});
		},
		methods: {
			close(e){
				if(e.target.id==="popup-layer"){
					this.popupShow = false;
				}
			},
			clickFilter(index) {
				if(this.popupShow && this.filterIndex===index)
				{
					this.popupShow = false;
				}else{
					this.popupItem = this.items[index];
					this.popupShow = true;
				}
				if(this.popupItem.listType=="city" && this.popupItem.selectIndex!=-1){
					this.cityValue = this.popupItem.selectName;
				}
				this.filterIndex = index;
			},
			clickCity(){
				this.clickItem(0,{id:this.cityValue,name:this.cityValue});
			},
			clickItem(index,item){
				var th = this;
				//小程序原因才需要这块
				if(this.selectItems.length==0){
					this.items.forEach(function(it,index){
						th.selectItems.push({
							selectIndex:-1,
							selectName:""
						});
					});
				}
				
				var name = (item.id=="" ? this.items[this.filterIndex].name : item.name);
				if(name.length>6) name = name.substring(0,6) + "...";
				
				var selectItem = this.items[this.filterIndex];
				selectItem.selectIndex = index;
				selectItem.selectName = name;
				if(index==0){
					selectItem.className = "";
				}else{
					selectItem.className = "select";
				}
				//selectItem.name = name;

				//小程序这块没法触发
				//this.$set(this.items,this.filterIndex,selectItem);
				this.$set(th.selectItems,this.filterIndex,selectItem);
				this.popupShow = false;
				
				this.$emit('change',{filterArray:[{
					name:this.items[this.filterIndex].id,
					value:item.id
				}],load:true});
			}
		},
		computed: {
			
		}
	}
</script>

<style scoped lang="scss">
	.filter{
		text-align: center;
		width: 100%;
		background-color: #ffffff;
		
		.weui-flex__item{
			height: 96upx;
			line-height: 96upx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
		}
		
		// .rotate{
		// 	transform:rotate(180deg);
		// 	color: $uni-theme-color;
		// }
		.jiantou{
			font-size:32upx;
		}
		.jiantou:after {
		    content: " ";
			display: inline-block;
			height: 8px;
			width: 8px;
			border-width: 2px 2px 0 0;
			border-color: #c8c8cd;
			border-style: solid;
			-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
			transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
			-webkit-transform: rotate(135deg);
			transform: rotate(135deg);
			position: relative;
			top: -2px;
			position: absolute;
			top: 50%;
			margin-top: -8px;
			margin-left: 5px;
		}
		.rotate:after{
			margin-top: -2px;
			transform: rotate(-45deg);
		}
		.select{
			color: $uni-theme-color;
		}
		.select:after{
			border-color: $uni-theme-color;
		}
	}
	// .filter:after {
	// 	content: " ";
	// 	position: absolute;
	// 	left: 0px;
	// 	bottom: 0;
	// 	right: 0;
	// 	height: 1px;
	// 	border-bottom: 1rpx solid #e5e5e5;
	// 	color: #e5e5e5;
	// }
	// 
	.popup-layer {
		position: fixed;
		z-index: 999999;
		background: rgba(0, 0, 0, .3);
		height: 100%;
		width: 100%;
		left: 0px;
		overflow: hidden;
		
		.popup-content {
			background: #FFFFFF;
			transition: all .3s ease;
			background-color: #F6F7F8;
		    padding: 0px 30upx 30upx 30upx;
			width:calc(100vw – 30upx);
		}
		
		.content-title {
			border-bottom: #EEEEEE 1px solid;
			padding: 20upx 30upx;
			font-size: 28upx;
			color: #999999;
		}
		
		.content-detail {
			padding: 10upx 30upx;
		}
		
		.content-row,.content-row-active {
			padding-top: 30upx;
			display: flex;
			justify-content: space-between;
		}
		.content-row-active{
			color: $uni-theme-color;
		}
		.content-col,.content-col-active {
			background-color: #FFFFFF;
			color: #666666;
			padding: 20upx 24upx;
			border-radius: 40upx;
			margin-right: 20upx;
			margin-top: 30upx;
			line-height:1;
			display: inline-block;
		}
		.content-col-active {
			background-color: $uni-theme-color;
			color: #FFFFFF;
		}
	}
</style>
